<template>
  <div>
    <el-form ref=“form” >

      <el-card class="box-card">
        <el-row :gutter="24">
          <el-col :span="8">
            <div>
              <el-card class="box-card">
                <div class="card-header">
                  <el-tag type="success" size="medium" class="input">板配筋</el-tag>
                  <el-form-item label="混凝土强度设计值">
                    <el-select v-model="gongcheng.c" placeholder="请选择标号" @change="Hung">
                      <el-option label="C20" value="20"></el-option>
                      <el-option label="C25" value="25"></el-option>
                      <el-option label="C30" value="30"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="钢筋弹性模量">
                    <el-select v-model="gongcheng.HRB" placeholder="请选择强度" @change="Hrb">
                      <el-option label="HPB300" value="210000"></el-option>
                      <el-option label="HRB335、HRB400、HRB500" value="200000"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="纵筋抗拉压强度设计值 fy">
                    <el-input v-model="gongcheng.fy"></el-input>
                  </el-form-item>
                  <el-form-item label="弯矩M(KN)">
                    <el-input v-model="gongcheng.M" @change="M"></el-input>
                  </el-form-item>
                  <el-form-item label="板厚h(mm)">
                    <el-input v-model="gongcheng.h"></el-input>
                  </el-form-item>
                  <el-form-item label="板宽b(mm)">
                    <el-input v-model="gongcheng.b"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-button type="success" round class="botton" @click="showDrawer">计算</el-button>
                  <el-button type="danger" round class="botton" @click="deleteValue">重置</el-button>
                </div>
              </el-card>
            </div>
          </el-col>

          <el-col :span="8">
            <el-card class="box-card">
              <el-form-item label="混凝土自重荷载设计值GK(KN)">
                <el-input v-model="gongcheng.GK"></el-input>
              </el-form-item>
              <el-form-item label="混凝土可变荷载设计值QK(KN)">
                <el-input v-model="gongcheng.QK"></el-input>
              </el-form-item>
              <el-form-item label="板跨度L(m)">
                <el-input v-model="gongcheng.L"></el-input>
              </el-form-item>
              <el-form-item label="可承受荷载">
                <el-input v-model="gongcheng.G" disabled></el-input>
              </el-form-item>
              <el-form-item label="弯矩M(KN)">
                <el-input v-model="gongcheng.M" disabled></el-input>
              </el-form-item>
              <div>
                <el-button type="success" round class="botton" @click="showWan">计算</el-button>
                <el-button type="danger" round class="botton" @click="deleteValue">重置</el-button>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="box-card">
              <el-form-item label="混凝土抗压强度设计值fck">
                <el-input v-model="gongcheng.fck" disabled></el-input>
              </el-form-item>
              <el-form-item label="混凝土抗拉强度设计值ft">
                <el-input v-model="gongcheng.ft" disabled></el-input>
              </el-form-item>
              <el-form-item label="钢筋弹性模量Es">
                <el-input v-model="gongcheng.Es" disabled></el-input>
              </el-form-item>
              <el-form-item label="as">
                <el-input v-model="gongcheng.as" disabled></el-input>
              </el-form-item>
              <el-form-item label="a">
                <el-input v-model="gongcheng.a" disabled></el-input>
              </el-form-item>
              <el-form-item label="ab">
                <el-input v-model="gongcheng.ab" disabled></el-input>
              </el-form-item>
              <el-form-item label="钢筋截面面积As">
                <el-input v-model="gongcheng.As" disabled></el-input>
              </el-form-item>
              <el-form-item label="钢筋截面面积As1">
                <el-input v-model="gongcheng.As1" disabled></el-input>
              </el-form-item>
              <el-form-item label="最小配筋率Pmin">
                <el-input v-model="gongcheng.Pmin" disabled></el-input>
              </el-form-item>
              <el-form-item label="适配钢筋Ass（mm）">
                <el-input v-model="gongcheng.Ass" disabled></el-input>
              </el-form-item>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <div>
        <a-drawer
            title="计算结果"
            :placement="placement"
            :closable="false"
            :visible="visible"
            @close="onClose"
        >
        </a-drawer>
      </div>


    </el-form>
  </div>

</template>

<script>
export default {
  name: "banJin",
  data(){
    return{
      screenHeight: document.body.clientHeight,
      visible: false,
      placement: 'top',
      gongcheng:{
        c:"",
        HRB:"",
        b:"",
        h:"",
        fck:"",Es:"",fy:"",ft:"",Ec:"",a1:"",B1:"",ab:"",aE:"",
        Pmin:"",as:'',GK:"",QK:'',As1:"",Ass:"",G:''
      }
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        // 可以限制最小高度
        // if (document.body.clientHeight - 240 < 450) {
        //   return
        // }
        window.screenHeight = document.body.clientHeight
        that.screenHeight = window.screenHeight
      })()
    }
  },
  watch: {
    screenHeight (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // 打印screenWidth变化的值
          console.log(that.screenHeight)
          that.timer = false
        }, 400)
      }
    }
  },
  methods:{
    showWan(){
      this.gongcheng.G=1.2*this.gongcheng.GK+1.4*this.gongcheng.QK
      this.gongcheng.M=this.gongcheng.G*this.gongcheng.L*this.gongcheng.L/8
    },
    showDrawer(){
      this.gongcheng.as=this.gongcheng.M*1000000/this.gongcheng.fck/this.gongcheng.b/(this.gongcheng.h-20)/(this.gongcheng.h-20)
      this.gongcheng.ab=0.8/(1+(this.gongcheng.fy/this.gongcheng.Es/0.0033))
      this.gongcheng.a=1-Math.sqrt((1-2*this.gongcheng.as))
      this.gongcheng.As=this.gongcheng.a*this.gongcheng.fck*this.gongcheng.b*(this.gongcheng.h-20)/this.gongcheng.fy
      if (45*this.gongcheng.ft/this.gongcheng.fy<0.2){
        this.gongcheng.Pmin=0.2
      }else {
        this.gongcheng.Pmin=45*this.gongcheng.ft/this.gongcheng.fy
      }
      this.gongcheng.As1=this.gongcheng.Pmin*this.gongcheng.b*(this.gongcheng.h-20)/100
      if (this.gongcheng.As>this.gongcheng.As1){
        this.gongcheng.Ass=this.gongcheng.As
      }else {
        this.gongcheng.Ass=this.gongcheng.As1
      }
    },
    Hung(){
      switch (this.gongcheng.c){
        case "20": this.gongcheng.fck=9.6,this.gongcheng.ft=1.1
              break
        case "25": this.gongcheng.fck=11.9,this.gongcheng.ft=1.27
          break
        case "30": this.gongcheng.fck=14.3,this.gongcheng.ft=1.43
          break
      }
    },
    Hrb(){
      switch (this.gongcheng.HRB) {
        case "210000":
          this.gongcheng.Es = 210000
          break
        case "200000":
          this.gongcheng.Es = 200000
          break
      }
    },
    M(){
      this.gongcheng.as=this.gongcheng.M*1000000/this.gongcheng.fck/this.gongcheng.b/(this.gongcheng.h-20)/(this.gongcheng.h-20)
      console.log(this.gongcheng.as)
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
  margin-left: 30px;
  border-radius: 10px;
}
.card-header {

}
.input{
  margin-right: 10px;
  margin-left: 10px;
  /*width: 20px;*/
}

</style>